<template>
  <el-dialog
    v-el-drag-dialog
    :title="!dataForm.id ? '详情' : '详情'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="60%">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="商品图片" prop="goodsImg">
              <el-upload
              :action="this.$http.adornUrl(`/business/goods/uploadImg?token=${this.$cookie.get('token')}`)"
              list-type="picture-card"
              :file-list="dataForm.goodsImg"
              :on-preview="handlePreview"
              :on-success="handleSuccess"
              :on-remove="handleRemove"
              :on-exceed="onExceed"
              :limit="1">
              <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="商品详情图" prop="descImg">
              <el-upload
              :action="this.$http.adornUrl(`/business/goods/uploadImg?token=${this.$cookie.get('token')}`)"
              list-type="picture-card"
              :file-list="dataForm.descImg"
              :on-preview="handlePreview"
              :on-success="handleSuccess1"
              :on-remove="handleRemove1"
              :on-exceed="onExceed1"
              :limit="3">
              <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="商品名称" prop="goodsName">
              <span>{{dataForm.goodsName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="商品描述" prop="goodsDesc">
              <textarea v-model="dataForm.goodsDesc" style="width:200px"></textarea>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="商家名称" prop="trueName">
              <span>{{dataForm.trueName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="商家账号" prop="username">
              <span>{{dataForm.username}}</span>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="商家类型" prop="userType">
              <el-select v-model="dataForm.userType" placeholder="商家类型">
                <el-option
                v-for="item in dataForm.usertypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                disabled>
                </el-option>
             </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="上架/下架" prop="isSale">
              <el-select v-model="dataForm.isSale" placeholder="上架/下架">
                <el-option
                v-for="item in dataForm.issaleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                disabled>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="是否返现金券" prop="isCommission">
              <el-select v-model="dataForm.isCommission" placeholder="是否返现金券">
                <el-option
                v-for="item in dataForm.iscommissionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                disabled>
                </el-option>
             </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="审核结果" prop="goodsStatus">
              <el-select v-model="dataForm.goodsStatus" placeholder="审核结果">
                <el-option
                v-for="item in dataForm.goodsstatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                disabled>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="商品市场价格" prop="marketPrice">
              <span>{{dataForm.marketPrice}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="会员价格" prop="vipPrice">
              <span>{{dataForm.vipPrice}}</span>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="商品销售量" prop="saleCount">
              <span>{{dataForm.saleCount}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="现金券" prop="commission">
              <span>{{dataForm.commission}}</span>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="创建时间" prop="createTime">
              <el-date-picker v-model="dataForm.createTime" type="datetime" placeholder="创建时间" disabled></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="上架时间" prop="saleTime">
              <el-date-picker v-model="dataForm.saleTime" type="datetime" placeholder="上架时间" disabled></el-date-picker>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="下架时间" prop="shelvesTime">
              <el-date-picker v-model="dataForm.shelvesTime" type="datetime" placeholder="下架时间" disabled></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="审核说明" prop="statusRemarks">
              <textarea v-model="dataForm.statusRemarks" placeholder="审核说明" style="width:200px"></textarea>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="商品运费" prop="deliverMoney">
              <span>{{dataForm.deliverMoney}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="商品库存" prop="goodsStock">
              <span>{{dataForm.goodsStock}}</span>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="点击数量" prop="clickCount">
              <span>{{dataForm.clickCount}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="配送方式" prop="distributionTypes">
              <el-select v-model="dataForm.distributionTypes" placeholder="配送方式">
                <el-option
                v-for="item in dataForm.distributiontypesOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                disabled>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="商品条码" prop="barCode">
            <span>{{dataForm.barCode}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dialogImageUrl: '',
        dialogVisible: false,
        dataForm: {
          goodsId: 0,
          goodsImg: [],
          descImg: [],
          trueName: '',
          username: '',
          goodsName: '',
          marketPrice: '',
          userType: '',
          vipPrice: '',
          saleCount: '',
          isSale: '',
          goodsDesc: '',
          goodsStatus: '',
          createTime: '',
          saleTime: '',
          statusRemarks: '',
          distributionTypes: '',
          isCommission: '',
          commission: '',
          goodsStock: '',
          clickCount: '',
          deliverMoney: '',
          shelvesTime: '',
          goodsimg: '',
          descimg: [],
          barCode: '',
          usertypeOptions: [{
            value: 1,
            label: '区域运营商'
          }, {
            value: 2,
            label: '普通联盟店'
          }, {
            value: 3,
            label: '消费者'
          }, {
            value: 4,
            label: 'VIP会员'
          }, {
            value: 5,
            label: '中级版联盟店'
          }, {
            value: 6,
            label: '高级版联盟店'
          }, {
            value: 7,
            label: '城市合伙人'
          }, {
            value: 8,
            label: '城市合伙人联盟店'
          }],
          issaleOptions: [{
            value: '0',
            label: '下架'
          }, {
            value: '1',
            label: '上架'
          }],
          distributiontypesOptions: [{
            value: '-1',
            label: '物流、自取、商家配送'
          }, {
            value: '0',
            label: '物流'
          }, {
            value: '1',
            label: '自取'
          }, {
            value: '2',
            label: '商家配送'
          }],
          iscommissionOptions: [{
            value: '0',
            label: '不返现金券'
          }, {
            value: '1',
            label: '返现金券'
          }],
          goodsstatusOptions: [{
            value: '-1',
            label: '禁售'
          }, {
            value: '0',
            label: '待审核'
          }, {
            value: '1',
            label: '审核通过'
          }]
        },
        dataRule: {}
      }
    },
    methods: {
      init (id) {
        this.dataForm.descimg = []
        this.dataForm.goodsimg = []
        this.dataForm.goodsId = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.goodsId) {
            this.$http({
              url: this.$http.adornUrl(`/business/goods/getGoodsById/${this.dataForm.goodsId}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.trueName = data.data.trueName
                this.dataForm.username = data.data.username
                this.dataForm.goodsName = data.data.goodsName
                var img = data.data.goodsImg
                this.dataForm.goodsImg.push({name: 'tupian', url: 'http://image.yilianbaihui.cn/consumer/goods/' + img})
                this.dataForm.goodsimg = img
                this.dataForm.marketPrice = data.data.marketPrice
                this.dataForm.userType = data.data.userType
                this.dataForm.marketPrice = data.data.marketPrice
                this.dataForm.vipPrice = data.data.vipPrice
                this.dataForm.saleCount = data.data.saleCount
                this.dataForm.isSale = data.data.isSale
                this.dataForm.goodsDesc = data.data.goodsDesc
                this.dataForm.goodsStatus = data.data.goodsStatus
                this.dataForm.createTime = data.data.createTime
                this.dataForm.saleTime = data.data.saleTime
                this.dataForm.statusRemarks = data.data.statusRemarks
                this.dataForm.distributionTypes = data.data.distributionTypes
                this.dataForm.isCommission = data.data.isCommission
                this.dataForm.commission = data.data.commission
                this.dataForm.goodsStock = data.data.goodsStock
                this.dataForm.clickCount = data.data.clickCount
                this.dataForm.deliverMoney = data.data.deliverMoney
                this.dataForm.clickCount = data.data.clickCount
                this.dataForm.deliverMoney = data.data.deliverMoney
                this.dataForm.shelvesTime = data.data.shelvesTime
                this.dataForm.barCode = data.data.barCode
                var imgs = data.data.descImg
                for (var i = 0; i < imgs.length; i++) {
                  this.dataForm.descImg.push({name: 'tupian', url: 'http://image.yilianbaihui.cn/consumer/goods/' + imgs[i]})
                  this.dataForm.descimg.push(imgs[i])
                }
              }
            })
          }
        })
      },
      // 图片预览
      handlePreview (file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      // 文件上传成功的钩子函数
      handleSuccess (res, file, fileList) {
        this.$message({
          type: 'info',
          message: '图片上传成功',
          duration: 6000
        })
        if (res.code === 0) {
          this.dataForm.goodsImg.push({name: 'tupian', url: 'http://image.yilianbaihui.cn/consumer/goods/' + res.data})
          this.dataForm.goodsimg = res.data
        }
      },
      // 删除文件之前的钩子函数
      handleRemove (file, fileList) {
        for (var i = 0; i < this.dataForm.goodsImg.length; i++) {
          var picc = this.dataForm.goodsImg[i]
          if (picc.url === file.url) {
            this.dataForm.goodsImg.splice(i, 1)
            this.dataForm.goodsimg = ''
          }
        }
        this.$message({
          type: 'info',
          message: '已删除原有图片',
          duration: 6000
        })
      },
      // 上传的文件个数超出设定时触发的函数
      onExceed (files, fileList) {
        this.$message({
          type: 'info',
          message: '最多只能上传1个图片',
          duration: 6000
        })
      },
      // 文件上传成功的钩子函数
      handleSuccess1 (res, file, fileList) {
        this.$message({
          type: 'info',
          message: '图片上传成功',
          duration: 6000
        })
        if (res.code === 0) {
          this.dataForm.descImg.push({name: 'tupian', url: 'http://image.yilianbaihui.cn/consumer/goods/' + res.data})
          this.dataForm.descimg.push(res.data)
        }
      },
      // 删除文件之前的钩子函数
      handleRemove1 (file, fileList) {
        for (var i = 0; i < this.dataForm.descImg.length; i++) {
          var picc = this.dataForm.descImg[i]
          if (picc.url === file.url) {
            this.dataForm.descImg.splice(i, 1)
            this.dataForm.descimg.splice(i, 1)
          }
        }
        this.$message({
          type: 'info',
          message: '已删除原有图片',
          duration: 6000
        })
      },
      // 上传的文件个数超出设定时触发的函数
      onExceed1 (files, fileList) {
        this.$message({
          type: 'info',
          message: '最多只能上传3个图片',
          duration: 6000
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/business/goods/${!this.dataForm.goodsId ? 'save' : 'modifyGoodsById'}`),
              method: 'post',
              data: this.$http.adornData({
                'goodsId': this.dataForm.goodsId || undefined,
                'goodsImg': this.dataForm.goodsimg,
                'descImg': this.dataForm.descimg,
                'goodsDesc': this.dataForm.goodsDesc,
                'statusRemarks': this.dataForm.statusRemarks
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
